<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>企业实名认证情况</title>
<style type="text/css">
		body,ul,h1,h2,h3,p{margin:0; padding:0;}
		.fl{float:left;}
		li{list-style: none;}
	#pie{
		width: 1000px;
		height:500px;
		margin:30px auto;
	}
	.shuju{width: 1000px; margin:0 auto 100px; overflow: hidden; border:1px solid #6A5F5D;  background:#FBFBC5;}
	.shusub{width:33.3%;}
	.shusub h2{font-size:24px; font-weight:400; height:42px; line-height:42px; text-align:center; background:#95B3D7; border-bottom:1px solid #6A5F5D; border-right:1px solid #6A5F5D;}
	.shusub li{height:40px; line-height: 40px; text-align:center; border-bottom:1px solid #6A5F5D; border-right:1px solid #6A5F5D;}
	.shusub li span:nth-child(2){margin-left:8px; color: red;}
	#bar{
		width: 1200px;
		height:800px;
		margin:20px auto 0;
	}
	#chart{
		width: 1200px;
		height:800px;
		margin:20px auto 0;
	}
	.select-check select{height:28px;}
</style>
<script type="text/javascript">  
            function removeChilds(id){  
                var childs = document.getElementById(id).childNodes;//这一行代码和紧跟的下面的for循环用于清除原来日的下拉列表的select中的对节点  
                for(var i=childs.length-1;i>=0;i--) {  
                    document.getElementById(id).removeChild(childs[i]);        
                }  
            }  
            function setDay(){  
                var yearToDate=document.getElementById("year").value;  
                var monthToDate=document.getElementById("month").value;  
                //alert(yearToDate+":"+monthToDate);  
                var days=new Array(28,29,30,31);  
                var nowDate=new Date();  
                if(monthToDate==1||monthToDate==3||monthToDate==5||monthToDate==7||monthToDate==8||monthToDate==10||monthToDate==12){  
                    removeChilds("day");  
                    for( i=1; i<=days[3]; i++ ){  
                        if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//如果是当前系统时间则设置默认的日  
                            var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");  
                            var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);  
                            document.getElementById("day").appendChild(newOption);  
                        }else{  
                            var newOption = document.createElement("option");newOption.setAttribute("value",i);  
                            var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);  
                            document.getElementById("day").appendChild(newOption);  
                        }  
                    }  
                }  
                if(monthToDate==4||monthToDate==6||monthToDate==9||monthToDate==11){  
                    removeChilds("day");  
                    for( i=1; i<=days[2]; i++ ){  
                        if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//如果是当前系统时间则设置默认的日  
                            var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");  
                            var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);  
                            document.getElementById("day").appendChild(newOption);  
                        }else{  
                            var newOption = document.createElement("option");newOption.setAttribute("value",i);  
                            var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);  
                            document.getElementById("day").appendChild(newOption);  
                        }  
                    }  
                }  
                if(monthToDate==2){  
                    removeChilds("day");  
                    if(yearToDate%400==0||yearToDate%100!=0&&yearToDate%4==0){//闰年  
                        for( i=1; i<=days[1]; i++ ){  
                            if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//如果是当前系统时间则设置默认的日  
                                var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");  
                                var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);  
                                document.getElementById("day").appendChild(newOption);  
                            }else{  
                                var newOption = document.createElement("option");newOption.setAttribute("value",i);  
                                var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);  
                                document.getElementById("day").appendChild(newOption);  
                            }  
                        }  
                    }  
                    else{  
                        for( i=1; i<=days[0]; i++ ){  
                            if(yearToDate==nowDate.getFullYear()&&monthToDate==(nowDate.getMonth()+1)&&i==nowDate.getDate()){//如果是当前系统时间则设置默认的日  
                                var newOption = document.createElement("option");newOption.setAttribute("value",i);newOption.setAttribute("selected","selected");  
                                var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);  
                                document.getElementById("day").appendChild(newOption);  
                            }else{  
                                var newOption = document.createElement("option");newOption.setAttribute("value",i);  
                                var textToNewOption=document.createTextNode(i);newOption.appendChild(textToNewOption);  
                                document.getElementById("day").appendChild(newOption);  
                            }  
                        }  
                    }  
                }  
            }  
            function getMonth(){  
                var m;  
                for(m=1;m<=12;m++) {  
                    if((new Date().getMonth()+1)==m){  
                        document.write("<option value="+m+" selected=\"selected\">"+m+"</option>");  
                    }else{  
                        document.write("<option value="+m+">"+m+"</option>");  
                    }  
                }  
            }  
            function getYear(){  
                var y;  
                var date=new Date();  
                var fullYear=date.getFullYear();  
                for(y=fullYear-60;y<=fullYear;y++){  
                    if(y==fullYear){  
                        document.write("<option value="+y+" selected=\"selected\">"+y+"</option>");  
                    }else{  
                        document.write("<option value="+y+" >"+y+"</option>");  
                    }  
                }   
            } 

        </script> 
<script src="${pageContext.request.contextPath}/js/jquery.min.js?v=2.1.4"></script>
<script src="${pageContext.request.contextPath}/js/echarts.min.js"></script>
</head>
<body>
	<div style="overflow:hidden; width:1000px; margin:20px auto 0;"> 
        <div style="float:left;" class="select-check">
            <select name="year" id="year" onChange="setDay();"><script type="text/javascript">getYear();</script></select>年  
            <select name="month" id="month" onChange="setDay()"><script type="text/javascript">getMonth();</script></select>月  
            <select name="day" id="day"><script type="text/javascript">setDay();</script></select>日 
        </div>
    </div> 
	<div id="pie"></div>
	<div class="shuju">
		<div class="fl shusub">
			<h2>本月汇总</h2>
			<ul>
				<li><span>总订单:</span><span class="sumOrder"></span></li>
				<li><span>实名订单:</span><span class="authOrder"></span></li>
				<li style="border-bottom:none;"><span>比率:</span><span class="Percentage"></span></li>
			</ul>
		</div>
		<div class="fl shusub">
			<h2>上月汇总</h2>
			<ul>
				<li><span>总订单:</span><span class="lastsumOrder"></span></li>
				<li><span>实名订单:</span><span class="lastauthOrder"></span></li>
				<li style="border-bottom:none;"><span>比率:</span><span class="lastPercentage"></span></li>
			</ul>
		</div>
		<div class="fl shusub" style="width:33.4%;">
			<h2 style="border-right:none;">企业年汇总</h2>
			
			<ul>
				<li style="border-right:none;"><span>平台总订单:</span><span class="pingsumOrder"></span></li>
				<li style="border-right:none;"><span>平台实名订单:</span><span class="pingauthOrder"></span></li>
			</ul>
		</div>
	</div>
	<div style="width:1200px; margin:0 auto;">
       <div style="overflow:hidden; margin-bottom:40px;"></div> 
       <div id="echarts-sum" style="text-align: center; color:#61A0A8;">实名认证订单统计表</div>
	   <div id="bar"></div>
    </div>
    <div class="shuju">
		<div class="fl shusub">
			<h2>本月汇总</h2>
			<ul>
				<li><span>总订单:</span><span class="sumOrder"></span></li>
				<li><span>实名订单:</span><span class="authOrder"></span></li>
				<li style="border-bottom:none;"><span>比率:</span><span class="Percentage"></span></li>
			</ul>
		</div>
		<div class="fl shusub">
			<h2>上月汇总</h2>
			<ul>
				<li><span>总订单:</span><span class="lastsumOrder"></span></li>
				<li><span>实名订单:</span><span class="lastauthOrder"></span></li>
				<li style="border-bottom:none;"><span>比率:</span><span class="lastPercentage"></span></li>
			</ul>
		</div>
		<div class="fl shusub" style="width:33.4%;">
			<h2 style="border-right:none;">企业年汇总</h2>
			
			<ul>
				<li style="border-right:none;"><span>平台总订单:</span><span class="pingsumOrder"></span></li>
				<li style="border-right:none;"><span>平台实名订单:</span><span class="pingauthOrder"></span></li>
			</ul>
		</div>
	</div>
   <div id="chart"></div>
   <div class="shuju">
		<div class="fl shusub">
			<h2>本月汇总</h2>
			<ul>
				<li><span>总订单:</span><span class="sumOrder"></span></li>
				<li><span>实名订单:</span><span class="authOrder"></span></li>
				<li style="border-bottom:none;"><span>比率:</span><span class="Percentage"></span></li>
			</ul>
		</div>
		<div class="fl shusub">
			<h2>上月汇总</h2>
			<ul>
				<li><span>总订单:</span><span class="lastsumOrder"></span></li>
				<li><span>实名订单:</span><span class="lastauthOrder"></span></li>
				<li style="border-bottom:none;"><span>比率:</span><span class="lastPercentage"></span></li>
			</ul>
		</div>
		<div class="fl shusub" style="width:33.4%;">
			<h2 style="border-right:none;">企业年汇总</h2>
			
			<ul>
				<li style="border-right:none;"><span>平台总订单:</span><span class="pingsumOrder"></span></li>
				<li style="border-right:none;"><span>平台实名订单:</span><span class="pingauthOrder"></span></li>
			</ul>
		</div>
	</div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('chart'));
var myBar = echarts.init(document.getElementById('bar'));
var myPie = echarts.init(document.getElementById('pie'));
var weekXData = [];
var weekupData = [];
var weekdownData = [];
 var names = [];    //类别数组（用于存放饼图的类别）
var brower = [];
var notBrower = [];
var dataSource = [];
var year = new Date().getFullYear();
var month = new Date().getMonth() + 1;
var day =  new Date().getDate();
var dateTime = year + "-" + month + "-" + day;

/* 柱状图开始 */
optionz = {
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'cross',
	            crossStyle: {
	                color: '#999'
	            }
	        }
	    },
	    toolbox: {
	        feature: {
	            dataView: {show: true, readOnly: false},
	            magicType: {show: true, type: ['line', 'bar']},
	            restore: {show: true},
	            saveAsImage: {show: true}
	        }
	    },
	    legend: {
	        data:['未实名认证订单','实名认证订单']
	    },
	    xAxis: [
	        {
	            type: 'category',
	          
	            
	        }
	    ],
	    grid:{//直角坐标系内绘图网格
        show:true,//是否显示直角坐标系网格。[ default: false ]
    },
	    yAxis: [
	        {
	            type: 'value',
	            name: '实名认证订单统计表',
	            axisLabel: {
	                formatter: '{value}'
	            }
	        }
	    ],
	    series: [
	        {
	            name:'未实名认证订单',
	            type:'bar',
	            barWidth: 30
	        },
	        {
	            name:'实名认证订单',
	            type:'bar',
	            barWidth: 30
	        }  
	    ]
	};
	weekupData.splice(0,weekupData.length);
	weekdownData.splice(0,weekdownData.length);/* 清空数组 */
$.ajax({
			url: '../statis/getStatisticsChart.htm',
			type: 'post',
			dataType:'json',
			data: {'date': dateTime,'isTime': 1},
			async: false,
			success: function (result) { 
        		dataSource =result.data.list;
        		var Percentage = Math.round(dataSource[month - 1].auth/dataSource[month - 1].sum*10000)/100.00+'%';
        		var lastPercentage = Math.round(dataSource[month-2].auth/dataSource[month-2].sum*10000)/100.00+'%';
        		if(dataSource[month-1].auth==0){
        			Percentage=0+'%';
        		}
        		if(dataSource[month-2].auth==0){
        			lastPercentage=0+'%';
        		}
        		var pingsumOrder=0;
        		var pingauthOrder=0;
        		for(var i=0;i<dataSource.length;i++){
                        pingsumOrder+=dataSource[i].sum;
                        pingauthOrder+=dataSource[i].auth;
                        weekXData.push(dataSource[i].monthCount+'月'); 
                        weekupData.push(dataSource[i].notAuth); 
                        weekdownData.push(dataSource[i].auth);
                        names.push(dataSource[i].monthCount+'月');
                        brower.push(dataSource[i].auth);
                        notBrower.push(dataSource[i].notAuth);
	        	} 
	        	$(".pingauthOrder").text(pingauthOrder);
	        	$(".pingsumOrder").text(pingsumOrder);
        		$(".sumOrder").text(dataSource[month-1].sum);
        		$(".authOrder").text(dataSource[month-1].auth);
        		$(".Percentage").text(Percentage);
        		$(".lastsumOrder").text(dataSource[month-2].sum);
        		$(".lastauthOrder").text(dataSource[month-2].auth);
        		$(".lastPercentage").text(lastPercentage);
        		optionz.xAxis[0].data = weekXData;
				optionz.series[0].data = weekupData;
				optionz.series[1].data = weekdownData;
				myBar.setOption(optionz);
				myChart.setOption({  /* 面积图 */
			       	  title : {
					        text: '实名认证订单统计表',
					    },
					    tooltip : {	
					        trigger: 'axis'
					    },
					    legend: {
					        data:['未实名认证订单','实名认证订单']
					    },
					    toolbox: {
					        show : true,
					        feature : {
					            mark : {show: true},
					            dataView : {show: true, readOnly: false},
					            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
					            restore : {show: true},
					            saveAsImage : {show: true}
					        }
					    },
					    calculable : true,
					xAxis : [
					         {
					             type : 'category',
					             boundaryGap : false,
					             data:names
					         }
					     ],
				     yAxis : [
				         {
				             type : 'value'
				         }
				     ],
				     series : [
				         {
				             name:'未实名认证订单',
				             type:'line',
				             smooth:true,
				             itemStyle: {normal: {areaStyle: {type: 'default'}}},
				             data:notBrower,
				             
				         },
				         {
				             name:'实名认证订单',
				             type:'line',
				             smooth:true,
				             itemStyle: {normal: {areaStyle: {type: 'default'}}},
				             data:brower
				         }
				     ]
         		 });
				myPie.setOption({  /*饼图 */
					 title : {
					        text: '实名认证订单统计表',
					        x:'center'
					    },
					    tooltip : {
					        trigger: 'item',
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    legend: {
					        orient : 'vertical',
					        x : 'left',
					        data:['未实名认证订单','实名认证订单']
					    },
					    toolbox: {
					        show : true,
					        feature : {
					            mark : {show: true},
					            dataView : {show: true, readOnly: false},
					            magicType : {
					                show: true, 
					                type: ['pie', 'funnel'],
					                option: {
					                    funnel: {
					                        x: '25%',
					                        width: '70%',
					                        funnelAlign: 'left',
					                        max: 1548
					                    }
					                }
					            },
					            restore : {show: true},
					            saveAsImage : {show: true}
					        }
					    },
					    calculable : true,
					    series : [
					        {
					            name:'',
					            type:'pie',
					            radius : '65%',
					            center: ['50%', '60%'],
					            data:[
					                {value:dataSource[month-1].notAuth, name:'未实名认证订单'},
					                {value:dataSource[month-1].auth, name:'实名认证订单'},
					            ]
					        }
					    ]
       			 });
			} 	
});
$(".select-check select").change(function(){
    var yearToDate=$("#year").val();
    var monthToDate=$("#month").val();
    var dayToDate=$("#day").val();
    var dayinte=yearToDate+"-"+monthToDate+"-"+dayToDate;
    $.ajax({
		url: '../statis/getStatisticsChart.htm',
		type: 'post',
		dataType:'json',
		data: {'date': dayinte,'isTime': 1},
		async: false,
		success: function (result) { 
    		dataSource =result.data.list;
			myPie.setOption({  /*饼图 */
				 title : {
				        text: '实名认证订单统计表',
				        x:'center'
				    },
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				    legend: {
				        orient : 'vertical',
				        x : 'left',
				        data:['未实名认证订单','实名认证订单']
				    },
				    toolbox: {
				        show : true,
				        feature : {
				            mark : {show: true},
				            dataView : {show: true, readOnly: false},
				            magicType : {
				                show: true, 
				                type: ['pie', 'funnel'],
				                option: {
				                    funnel: {
				                        x: '25%',
				                        width: '70%',
				                        funnelAlign: 'left',
				                        max: 1548
				                    }
				                }
				            },
				            restore : {show: true},
				            saveAsImage : {show: true}
				        }
				    },
				    calculable : true,
				    series : [
				        {
				            name:'',
				            type:'pie',
				            radius : '65%',
				            center: ['50%', '60%'],
				            data:[
				                {value:dataSource[monthToDate-1].notAuth, name:'未实名认证订单'},
				                {value:dataSource[monthToDate-1].auth, name:'实名认证订单'},
				            ]
				        }
				    ]
   			 });
		} 	
});
})
</script>

</body>
</html>